<template>
  <!-- 订单详情 -->
  <div>
    <Banners />
    <div class="orderDetails content-box">
      <el-card class="box-card box-card-ordernum">
        <span
          >订单编号：<span class="text-blue">{{ orderlist.orderNumber }}</span></span
        >
        订单状态:
        <span>
          <span v-if="orderlist.orderStatus == 0">待支付</span>
          <span v-if="orderlist.orderStatus == 1">已支付</span>
          <span v-if="orderlist.orderStatus == 2">已取消</span>
        </span>
        <span class="orderMoney"
          >订单金额(元) <span class="text-orange">{{ orderlist.orderAmount }}</span></span
        >
      </el-card>
      <div v-if="orderlist.userType == 1">
        <p class="zulin">租赁公司信息</p>
        <!-- 个人 -->
        <el-card class="box-card corporate-information">
          <div class="companyName">
            <div>姓名：{{ orderlist.authInfo.companyName }}</div>
            <div class="businessLicense">电话：{{ orderlist.authInfo.contactPhone }}</div>
          </div>
          <div class="linkman">
            <div>身份证号码：{{ orderlist.authInfo.companyCode }}</div>
          </div>
        </el-card>
      </div>
      <!-- 公司 -->
      <div v-if="orderlist.userType == 2">
        <p class="zulin">租赁公司信息</p>
        <el-card class="box-card corporate-information">
          <div class="companyName">
            <div>公司名称：{{ orderlist.authInfo.companyName }}</div>
            <div class="businessLicense">营业执照：{{ orderlist.authInfo.companyCode }}</div>
          </div>
          <div class="linkman">
            <div>联系人：{{ orderlist.authInfo.contactName }}</div>
            <div class="legalPerson">法人：{{ orderlist.authInfo.legalIdName }}</div>
          </div>
          <div class="contactWay">
            <div>联系人方式：{{ orderlist.authInfo.contactPhone }}</div>
            <div class="farenCall">法人联系方式：{{ orderlist.authInfo.legalPhone }}</div>
          </div>
        </el-card>
      </div>
      <!-- 房屋基础信息 -->
      <div v-if="orderlist.serviceType == 1">
        <p>房屋基础信息</p>
        <el-card class="box-card corporate-information">
          <div class="companyName">
           <div v-if="housedata.buildingType == 'complex_building'">房产类型：综合楼</div>
          <div v-if="housedata.buildingType == 'exhibition'">房产类型：展场</div>
          <div v-if="housedata.buildingType == 'exclusive_shop'">房产类型：形象店</div>
          <div v-if="housedata.buildingType == 'Automobile 4S'">房产类型：4S店</div>
          <div v-if="housedata.buildingType == 'virtualhouse'">房产类型：虚拟房产</div>
            <div class="businessLicense">楼层：{{ housedata.projectFloorNumber }}</div>
          </div>
          <div class="linkman">
            <div>房屋编号：{{ housedata.projectNumber }}</div>
            <div class="legalPerson">房号：{{ housedata.projectName }}</div>
          </div>
          <div class="contactWay">
            <div>房屋区域：{{ housedata.projectRegionId }}</div>
            <div class="projectArea">房屋面积：{{ housedata.projectArea }}m²</div>
          </div>
        </el-card>
      </div>
      <!-- 房屋基础信息综合楼展场 -->

      <div v-if="orderlist.serviceType == 2">
        <p>房屋基础信息</p>
        <el-card class="box-card corporate-information">
          <el-table :data="housedata" style="width: 100%" border :header-cell-style="{ background: 'rgb(247,247,247)' }">
            <el-table-column type="index" label="序号" width="340"> </el-table-column>
            <el-table-column prop="projectName" label="场地编号" width="340"></el-table-column>
            <el-table-column prop="projectArea" label="面积(㎡)" width="340"></el-table-column>
            <el-table-column prop="projectUnitPrice" label="租赁单价(元/㎡.月)" width="345"></el-table-column>
          </el-table>
        </el-card>
      </div>

      <!-- 租赁费用信息 -->

      <p>租赁费用信息</p>
      <el-card class="box-card corporate-information">
        <div class="header">
          <div class="left">
            <span>租金</span>
            <span class="pink">免延1个月</span>
          </div>
          <div class="right">
            <span>小计：</span>
            <span>{{orderlist.rentAmount}}元</span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card corporate-information">
        <!-- 第一行数据 -->
        <div class="info">
          <div style="width: 15%" class="odd">租赁开始日期</div>
          <div style="width: 20%" class="even">{{ orderlist.rentStartTime }}至{{ orderlist.rentEndTime }}</div>
          <div style="width: 15%" class="odd">租赁月份</div>
          <div style="width: 20%" class="even">{{orderlist.rentTime}}</div>
          <div style="width: 15%" class="odd">税金单价</div>
          <div style="width: 20%" class="even">{{ orderlist.rentTaxAmount }}</div>
        </div>
        <!-- 第二行 -->
        <div class="info">
          <div style="width: 15%" class="odd">租赁起止时间</div>
          <div style="width: 20%" class="even">{{ orderlist.rentStartTime }}至{{ orderlist.rentEndTime }}</div>
          <div style="width: 15%" class="odd">租赁总面积</div>
          <div style="width: 20%" class="even"></div>

          <div style="width: 15%" class="odd">税率</div>
          <div style="width: 20%" class="even"></div>
        </div>
        <!-- 第三行 -->

        <div class="info">
          <div style="width: 15%" class="odd">计费期间</div>
          <div style="width: 20%" class="even">{{ orderlist.rentStartTime }}至{{ orderlist.rentEndTime }}</div>
          <div style="width: 15%" class="odd">收费金额(元)</div>
          <div style="width: 55%" class="even"></div>
        </div>

        <div class="title">
          <div class="odd foot" style="width: 100%">
            租赁保证金小计：<span>{{ orderlist.guaranteeAmount }}</span>
          </div>
        </div>
        <div class="title">
          <div class="odd foot" style="width: 100%">
            市场管理服务费小计：<span>{{ orderlist.marketFee }}</span>
          </div>
        </div>
        <div class="info">
          <div style="width: 15%" class="odd">服务费单价</div>
          <div style="width: 20%" class="even"></div>
          <div style="width: 15%" class="odd">税率</div>
          <div style="width: 55%" class="even"></div>
        </div>
        <div class="info">
          <div style="width: 15%" class="odd">收费起止时间</div>
          <div style="width: 20%" class="even">{{ orderlist.rentStartTime }}至{{ orderlist.rentEndTime }}</div>
          <div style="width: 15%" class="odd">收费金额(元)</div>
          <div style="width: 55%" class="even">{{ orderlist.marketFee }}元</div>
        </div>
        <div class="title">
          <div class="odd foot" style="width: 100%">
            市场管理服务费小计：<span>{{ orderlist.marketFee }}</span>
          </div>
        </div>
        <div class="info">
          <div style="width: 15%" class="odd">滞纳金标准</div>
          <div style="width: 20%" class="even">应付金额*0.03%*延期天数</div>
          <div style="width: 15%" class="odd">延期天数</div>
          <div style="width: 20%" class="even">{{ orderlist.delayDays }}</div>

          <div style="width: 15%" class="odd">收费金额</div>
          <div style="width: 20%" class="even">{{ orderlist.lateFee }}</div>
        </div>
        <div>
          <span>优惠活动：<i>租期免费延长一个月</i></span> <span>支付方式：<i>全款支付</i></span>
        </div>
      </el-card>
    </div>
    <Foots />
  </div>
</template>

<script>
import { getItem } from '@/utils/store.js'
import { detailslist, houselslist } from './index'
import Banners from '@/components/NavHead/index'

import Foots from '@/components/Footer/index'
export default {
  data() {
    return {
      orderlist: [], //获取id查找用户信息
      housedata: [], //房屋详情数据
      status: null,
      userType: '',
      serviceType: '', // 房屋**服务类型:** 1.房屋租赁 2.仓储租赁 3.会议室租赁 4.活动场地租赁
    }
  },
  created() {
    this.getuserlist() //获取信息通过订单id查询订单详情
    this.serviceType = getItem('serviceType')
  },
  mounted() {
    this.gethouselist()
  },
  methods: {
    async getuserlist() {
      var ids = getItem('id')
      console.log(ids, 'ids')
      try {
        const { data } = await detailslist(ids)
        this.userType = data.data.userType
        this.orderlist = data.data
        console.log(data, '获取详情')
      } catch (error) {
        console.log(error)
      }
    },
    async gethouselist() {
      let datas = {
        serviceType: getItem('serviceType'),
        id: getItem('id'),
      }

      try {
        const { data } = await houselslist(datas)
        // console.log(data,'获取房屋基础信息')
        /* this.housedata = data.data[0].projectList */
        /*  this.housedata=data.data[0] */
        if (datas.serviceType == 1) {
          this.housedata = data.data[0]
          console.log(this.housedata, '获取房屋基础信息')
        }else{
          this.housedata = data.data[0].projectList
           console.log(this.housedata, '获取房屋基础信息')
        }
      } catch (error) {
        console.log(error)
      }
    },
  },
  components: {
    Banners,
    Foots,
  },
}
</script>

<style scoped lang="less">
.orderDetails {
  width: 85%;
  margin: 0 auto;
  padding: 20px;
  .box-card-ordernum {
    width: 100%;
    position: relative;
    .text-blue {
      margin-right: 100px;
    }
    .orderMoney {
      position: absolute;
      right: 20px;
    }
  }
  .corporate-information {
    font-size: 14px;
    color: rgb(132, 132, 132);
    .linkman {
      display: inline-block;
      .legalPerson {
        margin-top: 15px;
      }
    }
    .companyName {
      margin-right: 20%;
      display: inline-block;
      .businessLicense {
        margin-top: 15px;
      }
    }
    .contactWay {
      margin-left: 20%;
      display: inline-block;
      .farenCall {
        margin-top: 15px;
      }
    }
  }
  p {
    display: inline-block;
    margin: 10px 0;
    border-bottom: 2px solid #57a9fe;
    padding: 10px 0;
    color: #57a9fe;
  }
  .header {
    width: 100%;
    height: 15px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    .pink {
      margin: 0 15px;
      background-color: #fa9aa5;
      color: #f7f7f7;
      padding: 3px;
    }
  }
  .info {
    display: flex;
    align-items: center;
    justify-content: start;
    border: 1px solid #ebebeb;
    div {
      height: 40px;
      text-align: center;
      line-height: 40px;
    }
    .odd {
      background-color: #f7f7f7;
    }
    .even {
      text-align-last: left;
      margin-left: 5px;
    }
  }
  .title {
    margin: 10px 0;
    text-align: right;
    border: 1px solid #ebebeb;
    height: 40px;
    line-height: 40px;
    background-color: #f7f7f7;
    span {
      color: #fd7373;
      margin-right: 5px;
    }
  }
}
</style>
